<template>
    
    <sc-drawer
        ref="drawerRef"
        @close="closeDrawer"
        class="bg-page"
        size="70%"
        v-bind="props"
        :isEditOption="isEditOption"
        :title="`工单号: ${formData.afterSaleOrderNo}`"
        @success="drawerSuccess"
    >
        
        
        <el-scrollbar>
            
            <el-form ref="formRef" class="pl-3" :model="formData" label-width="110px" inline>
                
                <!--                状态机-->
                <el-steps :active="afterSaleOrderStatus.currentStatus" class="px-10 p-2 mb-3 rounded-t-lg  !bg-white "
                          finish-status="finish">
                    
                    
                    <el-step v-for="(item,index) in afterSaleOrderStatus.statusList" class="mt-4">
                        <template v-slot:title>
                            <div class="text-xs"> {{ item }}</div>
                        
                        
                        </template>
                        
                        <template v-slot:icon>
                            <icon :size="11" name="el-icon-CircleCheckFilled"/>
                        </template>
                    </el-step>
                
                
                </el-steps>
                
                <el-card class="!border-none flex flex-1 " shadow="never">
                    <el-tabs class="flex flex-1 items-center" tab-position="left">
                        <el-tab-pane class="text-2xl font-medium" disabled>工单详情</el-tab-pane>
                    </el-tabs>
                </el-card>
                
                
                <!--                基本信息-->
                <el-card class="!border-none flex flex-1  justify-center items-center" shadow="never">
                    <div class=" text-lg	 mb-4">
                        基本信息
                    </div>
                    
                    <div class=" w-[800px]  ">
                        <div class="pl-3 grid grid-cols-2 gap-0">
                            <div>
                                <el-form-item label="工单类型 :" prop="afterSaleOrderType">
                                    
                                    <p v-for="item in afterSaleOrderConfig.afterSaleOrderType"
                                       v-show="item.code ===formData.afterSaleOrderType "
                                       class="text-tx-regular">
                                        {{ item.name }}
                                    </p>
                                
                                </el-form-item>
                            </div>
                            
                            <div>
                                <el-form-item label="来源 :" prop="source">
                                    <p v-for="item in afterSaleOrderConfig.orderSourceConfig"
                                       v-show="item.name ===formData.source "
                                       class="text-tx-regular">
                                        
                                        {{ item.value }}
                                    </p>
                                
                                
                                </el-form-item>
                            </div>
                            
                            
                            <div>
                                <el-form-item label="渠道 :" prop="channel">
                                    
                                    <p v-for="item in afterSaleOrderConfig.orderChannelConfig "
                                       v-show="item.name ===formData.channel "
                                       class="text-tx-regular">
                                        
                                        {{ item.value }}
                                    </p>
                                
                                
                                </el-form-item>
                            </div>
                            
                            
                            <div>
                                <el-form-item label="店铺 :" prop="shopName">
                                    <p v-for="item in shopNameList "
                                       v-show="item.name ===formData.shopName "
                                       class="text-tx-regular">
                                        
                                        {{ item.value }}
                                    </p>
                                </el-form-item>
                            </div>
                        
                        </div>
                    
                    </div>
                </el-card>
                
                <!--                订单信息-->
                <el-card class="!border-none flex flex-1 items-center justify-center " shadow="never">
                    <div class=" text-lg	 mb-4">订单信息</div>
                    <div class=" w-[800px] ">
                        
                        <div class="pl-3  grid grid-cols-2 gap-0">
                            <div>
                                <el-form-item label="订单号 :" prop="orderNumber">
                                    <p class="text-tx-regular">
                                        {{ formData.orderNumber }}
                                    </p>
                                
                                
                                </el-form-item>
                            </div>
                            
                            <div>
                                <el-form-item label="用户名称 :" prop="userName">
                                    <p class="text-tx-regular">
                                        {{ formData.userName }}
                                    </p>
                                </el-form-item>
                            </div>
                            
                            
                            <div>
                                <el-form-item label="用户电话 :" prop="userPhone">
                                    <p class="text-tx-regular">
                                        {{ formData.userPhone }}
                                    </p>
                                
                                </el-form-item>
                            </div>
                            
                            <div>
                                <el-form-item label="原因类别 :" prop="reason">
                                    
                                    <p v-for="item in afterSaleOrderConfig.orderCauseConfig"
                                       v-show="item.name ===formData.reason "
                                       class="text-tx-regular">
                                        {{ item.value }}
                                    </p>
                                
                                </el-form-item>
                            </div>
                        
                        </div>
                    
                    </div>
                </el-card>
                
                <!--                寄回物流信息-->
                <el-card class="!border-none flex flex-1 items-center justify-center " shadow="never">
                    <div class=" text-lg	 mb-4">寄回物流信息</div>
                    
                    <div class=" w-[800px]  pl-8">
                        <div class="pl-3  grid grid-cols-2 gap-0">
                            <div>
                                <el-form-item label="寄回物流公司 :" prop="logisticNumber">
                                    <p class="text-tx-regular">
                                        {{ formData.logisticNumber }}
                                    </p>
                                
                                
                                </el-form-item>
                            </div>
                            
                            <div>
                                <el-form-item label="寄回物流单号 :" prop="logisticCompany">
                                    <p class="text-tx-regular">
                                        {{ formData.logisticCompany }}
                                    </p>
                                </el-form-item>
                            </div>
                        
                        </div>
                    
                    </div>
                </el-card>
                
                <!--                发出物流信息-->
                <el-card class="!border-none flex flex-1 items-center justify-center " shadow="never">
                    <div class=" text-lg	 mb-4">发出物流信息</div>
                    
                    <div class=" w-[800px]  pl-8">
                        <div class="pl-3  grid grid-cols-2 gap-0">
                            <div>
                                <el-form-item label="发出物流公司 :" prop="logisticNumber">
                                    <p class="text-tx-regular">
                                        {{ formData.logisticNumber }}
                                    </p>
                                
                                
                                </el-form-item>
                            </div>
                            
                            <div>
                                <el-form-item label="发出物流单号 :" prop="logisticCompany">
                                    <p class="text-tx-regular">
                                        {{ formData.logisticCompany }}
                                    </p>
                                </el-form-item>
                            </div>
                        
                        </div>
                    
                    </div>
                </el-card>
                
                
                <!--        描述信息-->
                <el-card class="!border-none flex flex-1 items-center justify-center " shadow="never">
                    <div class=" w-[800px]">
                        <div class=" text-lg	 mb-4">描述信息</div>
                        
                        
                        <div class="pl-3  grid grid-cols-1 ">
                            <div>
                                <el-form-item label="描述 :" prop="description" class="w-full">
                                    <p class="text-tx-regular break-words w-9/12">
                                        {{ formData.description }}
                                    </p>
                                </el-form-item>
                            </div>
                        
                        
                        </div>
                    
                    </div>
                </el-card>
                
                
                <el-card class="!border-none flex flex-1  mt-4 " shadow="never"
                         v-if="formData.afterSaleOrderType===AfterSaleOrderTypeEnum.CONSIGNMENT">
                    
                    <el-tabs class="flex flex-1 items-center" tab-position="left">
                        <el-tab-pane class="text-2xl font-medium" disabled>收件人地址</el-tab-pane>
                    </el-tabs>
                </el-card>
                
                
                <!--                收件人信息-->
                <el-card class="!border-none flex flex-1 items-center justify-center " shadow="never"
                         v-if="formData.afterSaleOrderType===AfterSaleOrderTypeEnum.CONSIGNMENT">
                    
                    <div class=" text-lg	 mb-4">
                        收件信息
                    </div>
                    
                    <div class=" w-[800px]">
                        <div class="pl-3 grid grid-cols-2 gap-0">
                            <el-form-item label="收件人 :" prop="userName">
                                <p class="text-tx-regular">
                                    {{ formData.addressInfo?.userName }}
                                </p>
                            </el-form-item>
                            <el-form-item label="电话 :" prop="userPhone">
                                <p class="text-tx-regular">
                                    {{ formData.addressInfo?.userPhone }}
                                </p>
                            </el-form-item>
                            
                            <el-form-item label="详细地址 :" prop="address">
                                {{ formData.addressInfo?.addressFull }}
                            </el-form-item>
                        
                        
                        </div>
                    </div>
                </el-card>
                
                
                <el-card class="!border-none flex flex-1  mt-4 " shadow="never">
                    
                    <el-tabs class="flex flex-1 items-center" tab-position="left">
                        <el-tab-pane class="text-2xl font-medium" disabled>物料详情</el-tab-pane>
                    </el-tabs>
                </el-card>
                
                
                <el-card class="!border-none   " shadow="never">
                    
                    
                    <el-table
                        ref="tableRef"
                        class="mt-0.5 ml-4 mb-60 rounded-t-lg"
                        size="default"
                        :data="formData.itemInfo"
                    
                    >
                        
                        <el-table-column type="index" fixed label="行号" width="70"/>
                        
                        
                        <el-table-column label="售后物料状态" prop="status" min-width="120">
                            <template #default="{ row }">
                                <ScSignSvgRound v-for="(item,index)   in afterSaleOrderConfig.afterSaleOrderLineStatus"
                                                v-show=" row.inMaterIalInfo.status === item.code"
                                                :key=index
                                                :background="item.type"
                                                :value="item.name"/>
                            </template>
                        </el-table-column>
                        
                        
                        <el-table-column label="发出物料状态" prop="status" min-width="120"
                                         v-if="formData.afterSaleOrderType=== AfterSaleOrderTypeEnum.CONSIGNMENT">
                            
                            <template #default="{ row }">
                                <ScSignSvgRound v-for="(item,index)   in afterSaleOrderConfig.afterSaleOrderLineStatus"
                                                v-show=" row.outMaterialInfo.status === item.code"
                                                :key=index
                                                :background="item.type"
                                                :value="item.name"/>
                            </template>
                        
                        </el-table-column>
                        
                        
                        <el-table-column label="售后69码" fixed prop="batch" min-width="150">
                            
                            <template #default="{row}">
                                <p>{{ row.inMaterIalInfo.batch }}</p>
                            </template>
                        
                        </el-table-column>
                        
                        <el-table-column label="售后物料编码" prop="itemCode" min-width="150">
                            <template #default="{row}">
                                <p>{{ row.inMaterIalInfo.itemCode }}</p>
                            </template>
                        </el-table-column>
                        
                        
                        <el-table-column label="售后物料名称" prop="itemName" min-width="150">
                            <template #default="{row}">
                                <p>{{ row.inMaterIalInfo.itemName }}</p>
                            </template>
                        </el-table-column>
                        
                        
                        <el-table-column label="售后SN" fixed prop="itemName" min-width="150">
                            <template #default="{row}">
                                <p>{{ row.inMaterIalInfo.sn }}</p>
                            </template>
                        </el-table-column>
                        
                        
                        <el-table-column label="发出69码" fixed prop="itemName" min-width="150"
                                         v-if="formData.afterSaleOrderType=== AfterSaleOrderTypeEnum.CONSIGNMENT">
                            <template #default="{row}">
                                <p>{{ row.outMaterialInfo.batch }}</p>
                            </template>
                        </el-table-column>
                        
                        
                        <el-table-column label="发出物料编码" prop="itemName" min-width="150"
                                         v-if="formData.afterSaleOrderType=== AfterSaleOrderTypeEnum.CONSIGNMENT">
                            <template #default="{row}">
                                <p>{{ row.outMaterialInfo.itemCode }}</p>
                            </template>
                        </el-table-column>
                        
                        <el-table-column label="发出物料名称" prop="itemName" min-width="150"
                                         v-if="formData.afterSaleOrderType=== AfterSaleOrderTypeEnum.CONSIGNMENT">
                            <template #default="{row}">
                                <p>{{ row.outMaterialInfo.itemName }}</p>
                            </template>
                        </el-table-column>
                        
                        
                        <el-table-column label="物料属性" prop="itemName" min-width="150"
                                         v-if="formData.afterSaleOrderType === AfterSaleOrderTypeEnum.CONSIGNMENT">
                            <template #default="{row}">
                                <p>{{ row.outMaterialInfo.itemProperty }}</p>
                            </template>
                        </el-table-column>
                    </el-table>
                
                </el-card>
            
            </el-form>
        
        
        </el-scrollbar>
    </sc-drawer>
</template>

<script lang='ts' setup>
import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";
import {getAfterSaleOrderInfo, getAfterSaleOrderStatusManager} from "@/api/afterSale/order/AfterSaleOrderController";
import {UnwrapNestedRefs} from "@vue/reactivity";

import {useFormatterManager} from "@/manager/base/FormatterManager";
import AfterSaleStatusInfoDTO from "@/api/afterSale/order/dto/AfterSaleStatusInfoDTO";
import AfterSaleOrderInfoOrLineDTO from "@/api/afterSale/order/dto/AfterSaleOrderInfoOrLineDTO";
import {AfterSaleOrderTypeEnum} from "@/config/enums/aftersale/AfterSaleOrderTypeEnum";

let afterSaleOrderConfig = useAfterSaleEnumManager();
let formatterManager = useFormatterManager(afterSaleOrderConfig);

interface DetailProps {
    isEditOption?: boolean
    confirmText?: string
    
}

const props = withDefaults(defineProps<DetailProps>(), {
    isEditOption: false,
    confirmText: '确定'
    
})


let afterSaleOrderStatus: AfterSaleStatusInfoDTO = reactive(new AfterSaleStatusInfoDTO())
let formData: UnwrapNestedRefs<AfterSaleOrderInfoOrLineDTO> = reactive(new AfterSaleOrderInfoOrLineDTO())


const drawerRef = shallowRef()
const emit = defineEmits(['success', 'close'])


/**
 * 打开弹窗
 */
async function open(id: number) {
    await getAfterSaleOrderInfo({id}).then(spoons => {
        for (let formDataKey in formData) {
            //@ts-ignore
            formData[formDataKey] = spoons[formDataKey]
            
        }
    })
    
    await getAfterSaleOrderStatusManager({id}).then(spoons => {
        for (let formDataKey in afterSaleOrderStatus) {
            //@ts-ignore
            afterSaleOrderStatus[formDataKey] = spoons[formDataKey]
        }
        
    })
    
    drawerRef.value.open()
}


/**
 * 关闭当前Drawer
 */
function closeDrawer() {
    emit('close')
}


/**
 * 关闭当前Drawer
 */
function close() {
    drawerRef.value.close()
}


const shopNameList = computed(() => {
    return formatterManager.computeFormatterShop(formData.channel)
})


/**
 *  确定事件
 *
 * @author 徐寿春
 * 2023/4/23 10:28
 */
function drawerSuccess() {
    emit("success", formData.afterSaleOrderId)
}

defineExpose({
    open,
    close
})

</script>

